<template>
  <div id="app">
    <!-- 这是Home页面 -->
    <!-- <home @searchClick="homeClick" /> -->
    <!-- 这是tab-bar菜单栏 -->
    <component 
    :is="index == 0 && (flag ? search : home)"  @searchClick="homeClick" 
    @gohome="backhome"
    @getId="getId"
    >
    </component>
    <component :is="index == 1 && category"></component>
    <component :is="index == 2 && shoppingCart" @toShopCart='toCart'></component>
    <component :is="index == 3 && profile"></component>
    <component 
    :goods_id="goods_id" 
    :is="index == 4 && detail" 
    @goCart='gotoCart'
    ></component>
    <tab-bar 
    v-show="!flag" 
    @changeIndex="tabBarClick"
    :currIndex="tabBarIndex"
    ></tab-bar>

  </div>
</template>

<script>
import TabBar from './components/common/tab_bar/TabBar.vue'
import Home from "./views/Home"
import Search from "./views/Search"
import Category from "./views/Category"
import ShoppingCart from "./views/ShoppingCart"
import Profile from "./views/Profile"
import Detail from "./views/Detail"

import axios from 'axios'
export default {
  name: 'App',
  components: {
    // Home,
    TabBar
  },
  data() {
    return {
      tabBarIndex:0,
      goods_id:0,
      index:0,
      flag:false,
      home:Home,
      search:Search,
      category:Category,
      shoppingCart:ShoppingCart,
      profile:Profile,
      detail:Detail
    }
  },
  methods:{
    homeClick(r){
      this.flag = r
    },
    tabBarClick(i){
      this.index = i
    },
    backhome(){
      this.flag = false
    },
    getId(id){
      console.log(id)
      this.index = 4;
      this.goods_id = id
    },
    gotoCart(){
      this.index = 2
      this.flag = false
      this.tabBarIndex = 2
    },
    toCart(i){
      this.tabBarIndex = i
    }
  }
}
</script>

<style>
  *{margin: 0;padding: 0;}
</style>
